<template>
  <div>
    <el-checkbox
      v-if="enCheckAll"
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >
      全选
    </el-checkbox>
    <div style="margin: 15px 0;" />
    <el-checkbox-group
      v-model="checkedValuel"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox
        v-for="item in values"
        :key="item.id"
        :value="item.checked"
        :label="item.id"
      >
        {{ item.name }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  name: 'MultiSel',
  props: {
    values: {
      type: Array,
      default () {
        return []
      }
    },
    enCheckAll: { type: Boolean, default: false },
    checkedValue: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      checkAll: false,
      checkedValuel: this.checkedValue,
      isIndeterminate: true
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.values = this.values.map(x => {
        x.checked = val
      })
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.values.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.values.length
      this.$emit('update:checkedValue', this.checkedValuel)
    }
  }
}
</script>
<style scoped>

</style>
